import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {Select,
  Input,
  Button,
  Modal,
  Popover,
  Tree,
  Table,
  Cascader,
  Upload,
} from "antd";
import moment from "moment";

const { Option } = Select;
const {TreeNode} = Tree;
const { Search,TextArea } = Input;



 

// 订单商品续租分页
@inject(["store"])
@observer
class OrderRenewal extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.order = props.store.storeOrderRenewal;

  }
  
  componentDidMount(){
    this.store.navigation({page:"OrderRenewal"});
    console.log(this.data.length);
    if(!this.data.length){
      this.order.init();
    }
  }
  
  @computed get height(){return this.store.height;}
  @computed get website(){return this.store.website;}
  @computed get rootPath(){return this.store.rootPath;}

  @computed get loading(){return this.order.loading;}
  // 分页数据
  @computed get data() {return toJS(this.order.paging.data);}
  // 查询
  @computed get where() {return this.order.where;}
  @computed get tid() {return this.order.tid;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.order.paging.nowPage),total:Number(this.order.paging.maxNum),pageSize:Number(this.order.paging.num)};
  }

  render(){
    const columns = [
      {title: "编号",dataIndex: "id",width:"10%"},
      {title: "用户ID",dataIndex: "uid",width:"10%"},
      {title: "商铺id",dataIndex: "sid",width:"10%",render:(text,record)=>(
        <Link to={`${this.rootPath}/shops/edit/${record.params.product.sid}`}>
        {text}
        </Link>
      )},
      {title: "商品",dataIndex: "createtime",width:"10%",render:(text,record)=>(
        <view>
          <view>
            <Link to={`${this.rootPath}/pedit/${record.params.product.id}`}>
              {record.params.product.tit}
            </Link>
          </view>
          <view>
            <span>套餐:{record.params.selectPrice.tit}</span>
          </view>
        </view>
      )},

      {title: "租机天数",dataIndex: "leaseTerm",width:"10%"},
      {title: "支付状态",dataIndex: "status",width:"10%",render:text=><span>{["待支付", "待发货","待收货", "待归还", "已完成","关闭"][text]}</span>},
      
      {title: "寄回状态",dataIndex: "status",width:"10%",render:text=><span>{["未寄回", "寄回中","已收到"][text]}</span>},
      {title: "续租状态",dataIndex: "status",width:"10%",render:text=><span>{["未续租", "已续租"][text]}</span>},
      
      {title: "创建时间",dataIndex: "createtime",width:"10%",render:text=>moment.unix(text).format("YYYY-MM-DD")},
 
      {title: "相关操作",width:"15%",key: "form",
        render: (text ,record)=> {
          return(
            <View>
              <Button
                // onClick={()=>this.props.history.push(`${this.rootPath}/coupon/edit/${record.id}`)}
                shape="circle"
                title="编辑"
                icon={<EditOutlined />}
              />
              <Button
                onClick={()=>{
                  Modal.confirm({
                    title: "删除",
                    content: "删除这个订单？",
                    // onOk:()=>this.order.delete(record.id),
                    // onCancel() {},
                  });
                }}
                icon={<DeleteOutlined />}
                style={{margin:"0 10px"}}
                type="danger"
                shape="circle"
                title="删除"
              />
            </View>
          );
        } 
      },
    ];
    return(
      <View style={{height:this.height-70,width:"100%",overflow:"hidden",flexDirection:"column"}}>
        <View 
          style={{
            borderBottom:"1px #eee solid",
            height:50,
            alignItems:"center",
            background:"#f2f2f2"
          }}>
          <Select
            defaultValue="0"
            onChange={v=>this.order.set("where-field",v)}
            style={{width:"100px",margin:"0 5px"}}
            >
            <Option value="0">选择类型</Option>
            <Option value="uid">用户编号</Option>
            <Option value="sid">商铺编号</Option>
          </Select>
          <Select
            defaultValue="0"
            onChange={v=>this.order.set("where-condition",v)}
            style={{width:100,margin:"0 5px"}}
            >
            <Option value="0">选择条件</Option>
            <Option value="=">等于查询</Option>
            <Option value="like">模糊查询</Option>
          </Select>
          <Search
            placeholder="输入查询内容"
            onSearch={value => this.order.search(value)}
            style={{ width: 250 }}
            value={this.where.value}
            onChange={(e)=>this.order.set("where-value",e.target.value)}
            enterButton
          />
          <Button onClick={()=>this.order.init()} style={{margin:"0 5px 0 20px"}}>所有续租</Button>
          <Button style={{margin:"0 5px 0 20px"}}><Link to={`${this.rootPath}/order/recycle`}>所有寄回</Link></Button>
          <Button style={{margin:"0 5px 0 20px"}}><Link to={`${this.rootPath}/order`}>所有订单</Link></Button>
        </View>
        <Table
          scroll={{y:this.height-220,x:"100%"}}
          loading={this.loading}
          rowKey={record => record.id}
          columns={columns}
          dataSource={this.data}
          pagination={this.pagination}
          onChange={pagination=>this.order.page(pagination.current)}
        />
      </View>
    );
  }
}

export default OrderRenewal;